<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="author" content="范珍珍">
        <title>小米商城首页</title>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="base.css">
        <link rel="stylesheet" href="index.css">
        <style>
            
        </style>
    </head>
    <body>
        <!--底部导航栏-->
        <footer class="footer_ul">
            <ul class="ul_li">
                <li class="same-li color_first"><a href="index.html"><span class="glyphicon glyphicon-home"></span><span>首页</span></a></li>
                <li class="same-li"><a href="home.html"><span class="glyphicon glyphicon-th-list"></span><span>分类</span></a></li>
                <li class="same-li"><a href="cart.html"><span class="glyphicon glyphicon-shopping-cart"></span><span>购物车</span></a></li>
                <li class ="same-li"><a href="my.html"><span class="glyphicon glyphicon-user"></span><span>我的</span></a></li>
            </ul>
        </footer>

        <!--弹出框-->
        <div class="fixed_picture">
            <img src="image/nav.png" alt="">
            <div class="close"></div>
        </div>

<!--顶部导航区域-->
<main id="maincontent">
     <div class="nav_fixed" id="fixednav">
         <img src="image/logo.png" alt="">
         <a id="nav_search" href="">
             <span class="glyphicon glyphicon-search"></span>
             <span>搜索商品名称</span>
         </a>
         <a id="online" href="">登录</a> 
     </div>

<!--轮播图-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="image/轮播图1.jpg" alt="...">
    </div>
    <div class="item">
      <img src="image/轮播图2.jpg" alt="...">
   </div>
</div>
</div>
   
<!--中间内容区域-->
  <div class="content">
      <section id="content_top">
          <a href=""><img src="image/商城早报.png" alt=""></a>
          <a href="">小米新品展示。。。</a>
 </section>
      <section id="content_middle"></section>
      <section id="content_bottom" class="clearfix">
        <div id="left_pic">
            <a href=""><img src="image/图1.jpg" alt=""></a>
        </div>
        <div id="right_pic">
            <a href=""><img src="image/图2.jpg" alt=""></a>
            <a href=""><img src="image/图3.jpg" alt=""></a>
        </div>
      </section>

      <div id="banner">
           <section id="content_middle"></section>
          <a href=""><img src="image/图4.jpg" alt=""></a>
      </div>
      <div id="fames_pro">
          <a href=""><img src="image/图片1.jpg" alt=""></a>
      </div>

      <div id="product">
          <a href="">
              <figure>
                  <img src="image/图片2.jpg" alt="">
                  <figcaption>
                      <h4>红米NOTE</h4>
                        <h5>多彩金属 超长续航</h5>
                        <h6>￥999</h6>
                  </figcaption>
              </figure>
          </a>
          <a href="">
              <figure>
                  <img src="image/图片2.jpg" alt="">
                  <figcaption>
                      <h4>红米NOTE</h4>
                        <h5>多彩金属 超长续航</h5>
                        <h6>￥999</h6>
                  </figcaption>
              </figure>
          </a>
          <a href="">
              <figure>
                  <img src="image/图片3.jpg" alt="">
                  <figcaption>
                      <h4>红米NOTE</h4>
                        <h5>多彩金属 超长续航</h5>
                        <h6>￥999</h6>
                  </figcaption>
              </figure>
          </a>
          <a href="">
              <figure>
                  <img src="image/图片4.jpg" alt="">
                  <figcaption>
                      <h4>红米NOTE</h4>
                        <h5>多彩金属 超长续航</h5>
                        <h6>￥999</h6>
                  </figcaption>
              </figure>
          </a>
          <a href="">
              <figure>
                  <img src="image/图片5.jpg" alt="">
                  <figcaption>
                      <h4>红米NOTE</h4>
                        <h5>多彩金属 超长续航</h5>
                        <h6>￥999</h6>
                  </figcaption>
              </figure>
          </a>
          <a href="">
              <figure>
                  <img src="image/图片6.jpg" alt="">
                  <figcaption>
                      <h4>红米NOTE</h4>
                        <h5>多彩金属 超长续航</h5>
                        <h6>￥999</h6>
                  </figcaption>
              </figure>
          </a>

      </div>  

      
  </div>


</main>
        
        <script src="bootstrap/js/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="index.js"></script>
    </body>
</html>
